<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const username = ref('');
const password = ref('');
const confirmPassword = ref('');
const mobile = ref('');
const agreeTerms = ref(false);
const errorMessage = ref('');
const showPassword = ref(false);
const showConfirmPassword = ref(false);

// 切换密码可见性
const togglePasswordVisibility = () => {
  showPassword.value = !showPassword.value;
};

// 切换确认密码可见性
const toggleConfirmPasswordVisibility = () => {
  showConfirmPassword.value = !showConfirmPassword.value;
};

const handleSubmit = () => {
  // 表单验证
  if (!username.value) {
    errorMessage.value = '请填写用户名';
    return;
  }
  
  if (username.value.length < 4 || username.value.length > 20) {
    errorMessage.value = '用户名长度为4-20个字符';
    return;
  }
  
  if (!password.value) {
    errorMessage.value = '请设置密码';
    return;
  }
  
  if (password.value.length < 8 || password.value.length > 20) {
    errorMessage.value = '密码长度为8-20个字符';
    return;
  }
  
  if (password.value !== confirmPassword.value) {
    errorMessage.value = '两次输入的密码不一致';
    return;
  }
  
  if (!mobile.value) {
    errorMessage.value = '请输入手机号码';
    return;
  }
  
  // 简单的手机号验证
  const mobilePattern = /^1[3-9]\d{9}$/;
  if (!mobilePattern.test(mobile.value)) {
    errorMessage.value = '请输入正确的手机号码';
    return;
  }
  
  if (!agreeTerms.value) {
    errorMessage.value = '请阅读并同意用户服务协议和隐私政策';
    return;
  }
  
  // 这里可以添加注册逻辑
  console.log('注册信息:', { 
    username: username.value, 
    password: password.value,
    mobile: mobile.value
  });
  
  // 模拟注册成功
  showMessage('注册成功！即将跳转到登录页面...');
  setTimeout(() => {
    router.push('/login');
  }, 1500);
};

// 消息提示功能
const showMessage = (message: string) => {
  const messageElement = document.createElement('div');
  messageElement.className = 'fixed top-20 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-6 py-3 rounded-lg shadow-lg z-50 transition-opacity duration-300';
  messageElement.textContent = message;
  
  // 添加到页面
  document.body.appendChild(messageElement);
  
  // 2秒后淡出
  setTimeout(() => {
    messageElement.style.opacity = '0';
    setTimeout(() => {
      document.body.removeChild(messageElement);
    }, 300);
  }, 2000);
};
</script>

<template>
  <!-- 主体内容 -->
  <div class="min-h-screen flex flex-col" style="background-color: #f8f8f8;">
    <!-- 导航栏 -->
    <header class="bg-white p-4 border-b border-gray-200 shadow-sm">
      <div class="container mx-auto flex items-center justify-between">
        <router-link to="/" class="text-2xl font-bold text-rose-500 flex items-center">
          <font-awesome-icon icon="seedling" class="text-rose-500 mr-2" />
          花礼相伴
        </router-link>
        <nav class="hidden md:flex space-x-6">
          <router-link to="/" class="text-gray-600 hover:text-rose-500">首页</router-link>
          <router-link to="/categories" class="text-gray-600 hover:text-rose-500">分类</router-link>
          <router-link to="/cart" class="text-gray-600 hover:text-rose-500">购物车</router-link>
        </nav>
        <div class="flex items-center space-x-4">
          <router-link to="/register" class="text-white bg-rose-500 px-4 py-2 rounded-lg hover:bg-rose-600 transition duration-300">注册</router-link>
          <router-link to="/login" class="text-gray-600 hover:text-rose-500 hidden md:block">登录</router-link>
        </div>
      </div>
    </header>
    
    <!-- 移动端返回按钮 -->
    <div class="md:hidden bg-white p-4 flex items-center border-b border-gray-100">
      <router-link to="/login" class="text-rose-500">
        <font-awesome-icon icon="chevron-left" />
        <span class="ml-1">返回</span>
      </router-link>
      <h1 class="text-lg font-semibold mx-auto pr-4">注册新账号</h1>
    </div>

    <!-- 注册表单 -->
    <main class="flex-1 p-6" style="background-color: #f8f8f8;">
      <h2 class="text-2xl md:text-3xl font-bold text-center mb-8 hidden md:block">注册新账号</h2>
      <div class="w-full max-w-md md:max-w-lg mx-auto">
        <div class="bg-white rounded-lg shadow-md p-6 md:p-8 mb-6">
          <form @submit.prevent="handleSubmit">
            <div class="mb-4">
              <label for="username" class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
              <div class="relative">
                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                  <font-awesome-icon :icon="['far', 'user']" class="text-gray-400" />
                </div>
                <input 
                  v-model="username"
                  type="text" 
                  id="username" 
                  name="username" 
                  class="block w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg focus:ring-rose-500 focus:border-rose-500" 
                  placeholder="请设置用户名" 
                  required
                >
              </div>
              <p class="mt-1 text-xs text-gray-500">用户名长度为4-20个字符，支持中英文、数字</p>
            </div>

            <div class="mb-4">
              <label for="password" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
              <div class="relative">
                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                  <font-awesome-icon icon="lock" class="text-gray-400" />
                </div>
                <input 
                  v-model="password"
                  :type="showPassword ? 'text' : 'password'" 
                  id="password" 
                  name="password" 
                  class="block w-full pl-10 pr-10 py-3 border border-gray-300 rounded-lg focus:ring-rose-500 focus:border-rose-500" 
                  placeholder="请设置密码" 
                  required
                >
                <!-- 添加查看密码按钮 -->
                <button 
                  type="button" 
                  @click="togglePasswordVisibility" 
                  class="absolute inset-y-0 right-0 pr-3 flex items-center"
                >
                  <font-awesome-icon :icon="showPassword ? 'eye' : 'eye-slash'" class="text-gray-500" />
                </button>
              </div>
              <p class="mt-1 text-xs text-gray-500">密码长度8-20个字符，建议包含字母、数字和符号</p>
            </div>

            <div class="mb-6">
              <label for="confirm_password" class="block text-sm font-medium text-gray-700 mb-1">确认密码</label>
              <div class="relative">
                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                  <font-awesome-icon icon="lock" class="text-gray-400" />
                </div>
                <input 
                  v-model="confirmPassword"
                  :type="showConfirmPassword ? 'text' : 'password'" 
                  id="confirm_password" 
                  name="confirm_password" 
                  class="block w-full pl-10 pr-10 py-3 border border-gray-300 rounded-lg focus:ring-rose-500 focus:border-rose-500" 
                  placeholder="请再次输入密码" 
                  required
                >
                <!-- 添加查看密码按钮 -->
                <button 
                  type="button" 
                  @click="toggleConfirmPasswordVisibility" 
                  class="absolute inset-y-0 right-0 pr-3 flex items-center"
                >
                  <font-awesome-icon :icon="showConfirmPassword ? 'eye' : 'eye-slash'" class="text-gray-500" />
                </button>
              </div>
            </div>

            <div class="mb-6">
              <label for="mobile" class="block text-sm font-medium text-gray-700 mb-1">手机号码</label>
              <div class="relative">
                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                  <font-awesome-icon icon="mobile-alt" class="text-gray-400" />
                </div>
                <input 
                  v-model="mobile"
                  type="tel" 
                  id="mobile" 
                  name="mobile" 
                  class="block w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg focus:ring-rose-500 focus:border-rose-500" 
                  placeholder="请输入手机号码" 
                  required
                >
              </div>
            </div>

            <!-- 错误消息 -->
            <div v-if="errorMessage" class="mb-4 text-red-500 text-center text-sm">
              {{ errorMessage }}
            </div>

            <div class="flex items-center mb-6">
              <input 
                v-model="agreeTerms"
                id="terms" 
                type="checkbox" 
                class="h-4 w-4 text-rose-500 border-gray-300 rounded focus:ring-rose-500"
              >
              <label for="terms" class="ml-2 block text-sm text-gray-700">
                我已阅读并同意<a href="#" class="text-rose-500">《用户服务协议》</a>和<a href="#" class="text-rose-500">《隐私政策》</a>
              </label>
            </div>

            <button 
              type="submit" 
              class="w-full bg-rose-500 hover:bg-rose-600 text-white py-3 rounded-lg font-medium transition duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-rose-500"
            >
              立即注册
            </button>
          </form>
        </div>

        <div class="text-center">
          <p class="text-gray-600">已有账号? <router-link to="/login" class="text-rose-500 font-medium">立即登录</router-link></p>
        </div>
      </div>
    </main>
    
    <!-- 页脚 -->
    <footer class="bg-white border-t border-gray-200 py-6 mt-auto">
      <div class="container mx-auto px-4">
        <div class="flex flex-col md:flex-row justify-between items-center">
          <div class="mb-4 md:mb-0">
            <p class="text-gray-600">&copy; 2023 花礼相伴鲜花配送网站. 所有权利保留.</p>
          </div>
          <div class="flex space-x-4">
            <a href="#" class="text-gray-500 hover:text-rose-500">
              <font-awesome-icon :icon="['fab', 'weixin']" class="text-xl" />
            </a>
            <a href="#" class="text-gray-500 hover:text-rose-500">
              <font-awesome-icon :icon="['fab', 'weibo']" class="text-xl" />
            </a>
            <a href="#" class="text-gray-500 hover:text-rose-500">
              <font-awesome-icon icon="envelope" class="text-xl" />
            </a>
          </div>
        </div>
      </div>
    </footer>
  </div>
</template>

<style scoped>
body {
  background-color: #f8f8f8;
}
</style> 